<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>精美的 Tab 选项卡菜单（CSS 精灵图）</title>
    <style>
      /*  */
      body {
        padding: 0;
        margin: 0;
      }
      /*  */
      .tab {
        /* height: 50px; */
        width: 800px;
        background-color: #ddd;
        text-align: center;
        font-size: 0;

        margin: 50px auto 0;
        /* border: 1px solid red; */
        padding: 5px 0px;
        border-radius: 50px;
      }
      .tab span {
        display: inline-block;
        font-size: 16px;
        line-height: 40px;
        height: 40px;

        /* border: 1px solid red; */
        padding: 0 40px;
        border-radius: 50px;
      }
      .tab span i {
        display: inline-block;
        width: 26px;
        height: 26px;

        /* border: 1px solid red; */
        background-image: url(images/icon.png);

        vertical-align: middle;
        margin-right: 5px;
      }
      .tab span i.icon-1 {
        background-position: 0px 0px;
      }
      .tab span i.icon-2 {
        background-position: -26px 0px;
      }
      .tab span i.icon-3 {
        background-position: -52px 0px;
      }
      .tab span i.icon-4 {
        background-position: -78px 0px;
      }
      .tab span i.icon-5 {
        background-position: -104px 0px;
      }
      .tab span.current {
        background-color: pink;
        color: #fff;
      }
      .tab span.current i.icon-1 {
        background-position: 0px -26px;
      }
      .tab span.current i.icon-2 {
        background-position: -26px -26px;
      }
      .tab span.current i.icon-3 {
        background-position: -52px -26px;
      }
      .tab span.current i.icon-4 {
        background-position: -78px -26px;
      }
      .tab span.current i.icon-5 {
        background-position: -104px -26px;
      }
    </style>
  </head>
  <body>
    <div class="tab">
      <span class="current"><i class="icon-1"></i>备孕期间</span>
      <span><i class="icon-2"></i>怀孕</span>
      <span><i class="icon-3"></i>0-1岁</span>
      <span><i class="icon-4"></i>1-2岁</span>
      <span><i class="icon-5"></i>2-3岁</span>
    </div>
  </body>
</html>
